<template>
	<view class="page">
		<view class="content">
			<view class="poster-box y-f">
				<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				<view class="share-box" v-if="poster.finalPath">
					<view class="share-list-box x-f">
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-btn share-item y-f" open-type="share">
							<image class="share-img" :src="$IMG_URL + '/share_wx.png'" mode=""></image>
							<text class="share-title">微信好友</text>
						</button>
						<!-- #endif -->
						<view class="share-item y-f" @tap="handelGuize">
							<view class="guize-icon">
								<u-icon name="file-text-fill" size="45"></u-icon>
							</view>
							<text class="share-title">积分兑换规则</text>
						</view>
						<view class="share-item y-f" @tap="saveImage">
							<image class="share-img" :src="$IMG_URL + '/share_poster.png'" mode=""></image>
							<text class="share-title">保存图片</text>
						</view>
					</view>
				</view>
			</view>
			<view class="hideCanvasView">
				<canvas class="hideCanvas" canvas-id="invite_poster" :style="{ width: (poster.width || 1) + 'px', height: (poster.height || 1) + 'px' }"></canvas>
			</view>
		</view>
		
		<u-modal v-model="guizeShow" title="积分兑换规则" :show-confirm-button="false" show-cancel-button cancel-text="关闭">
			<scroll-view scroll-y class="slot-content">
				<view class="m-p m-p-t">一、积分获取</view>
				<view class="m-p">在小程序中，每消费1元，用户将获得0.5元的积分。积分是对用户在小程序内消费行为的回馈，旨在提升用户的购物体验。</view>
				<view class="m-p m-p-t">二、积分使用</view>
				<view class="m-p">积分有两种主要用途：</view>
				<view class="m-p">免费取水：用户可以使用积分在自提点附近的健康水站免费取水。每桶水的价格为1元，用户可以使用相应数量的积分进行抵扣。积分商城兑换：用户还可以在积分商城中，使用积分兑换小家电等商品。积分商城提供了丰富的商品选择，用户可以根据自己的需求和积分数量进行兑换。</view>
				<view class="m-p m-p-t">三、积分限制</view>
				<view class="m-p">请注意，积分不能当作现金使用，仅能在小程序指定的场景中进行兑换或抵扣。</view>
				<view class="m-p m-p-t">四、积分有效期</view>
				<view class="m-p">为了保持用户的活跃度和积分的有效性，小程序设定了积分有效期规则。如果用户累计6个月不登录商城或者没有使用线下水卡，积分将自动清零。这一规则旨在鼓励用户定期参与小程序的消费和互动，以充分利用积分带来的优惠。</view>
				<view class="m-p m-p-t">五、注意事项</view>
				<view class="m-p">请用户注意查看自己的积分余额和有效期，以免错过使用机会。积分兑换的商品数量有限，先到先得，建议用户及时关注并兑换心仪的商品。如有任何疑问或问题，用户可联系小程序客服进行咨询和解决。</view>
				<view class="m-p">通过上述积分兑换规则，小程序旨在为用户提供更加便捷、实惠的消费体验。希望用户能够积极参与小程序的各项活动，享受积分带来的福利。</view>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
import _app from '@/common/utils/QS-SharePoster/app.js';
import { getSharePoster } from '@/common/utils/QS-SharePoster/QS-SharePoster.js';
import { BASE_URL } from '@/env.js';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			poster: {},
			qrShow: false,
			canvasId: 'invite_poster',
			guizeShow: false,
		};
	},
	props: {},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			shareData: state => state.init.initData.share
		})
	},
	created() {
		let that = this;
		that.setShareInfo();
		if (that.shareInfo) {
			setTimeout(function() {
				that.$emit('getShareInfo', that.shareInfo);
				that.scene = encodeURIComponent(that.shareInfo.path.split('?')[1]);
				that.shareFc();
			}, 100);
		}
	},
	methods: {
		handelGuize() {
			this.guizeShow = true
		},
		async shareFc() {
			let that = this;
			console.log(that.shareData.user_poster_bg);
			try {
				const d = await getSharePoster({
					
					_this: this, //若在组件中使用 必传
					backgroundImage: that.$tools.checkImgHttp(that.shareData.user_poster_bg), //接口返回的背景图
					posterCanvasId: this.canvasId, //canvasId
					delayTimeScale: 20, //延时系数
					drawArray: ({ bgObj, type, bgScale }) => {
						const dx = bgObj.width * 0.3;
						const fontSize = bgObj.width * 0.042;
						const lineHeight = bgObj.height * 0.04;
						return new Promise((rs, rj) => {
							rs([
								{
									type: 'image', //头像
									url: that.$tools.checkImgHttp(that.userInfo.avatar),
									// url:"",
									alpha: 1,
									dx: bgObj.width * 0.5 - (bgObj.width * 0.16) / 2,
									dy: bgObj.width * 0.16,
									infoCallBack(imageInfo) {
										let scale = (bgObj.width * 0.16) / imageInfo.height;
										return {
											circleSet: {
												x: (imageInfo.width * scale) / 2,
												y: (bgObj.width * 0.16) / 2,
												r: (bgObj.width * 0.16) / 2
											}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
											dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
											dHeight: bgObj.width * 0.16
										};
									}
								},
								{
									type: 'text', //昵称
									text: that.userInfo.nickname,
									size: fontSize,
									color: 'black',
									alpha: 1,
									textAlign: 'middle',
									textBaseline: 'middle',
									infoCallBack(textLength) {
										_app.log('index页面的text的infocallback ，textlength:' + textLength);
										return {
											dx: bgObj.width * 0.5 - textLength * 0.5,
											dy: bgObj.width * 0.42
										};
									},
									serialNum: 0,
									id: 'tag1' //自定义标识
								},
								// #ifdef MP-WEIXIN
								{
									type: 'image', //微信小程序码
									url: `${that.$API_URL}wechat/wxacode?scene=${that.scene}`,
									alpha: 1,
									drawDelayTime: 500, //draw延时时间
									dx: bgObj.width * 0.5 - (bgObj.width * 0.35) / 2,
									dy: bgObj.width * 0.855,
									infoCallBack(imageInfo) {
										return {
											dWidth: bgObj.width * 0.35,
											dHeight: bgObj.width * 0.35
										};
									}
								}
								// #endif
							]);
						});
					},
					setCanvasWH: ({ bgObj, type, bgScale }) => {
						this.poster = bgObj;
					}
				});
				this.$set(this.poster, 'finalPath', d.poster.tempFilePath);
				this.qrShow = true;
			} catch (e) {
				_app.hideLoading();
				_app.showToast(JSON.stringify(e));
				console.log(JSON.stringify(e));
			}
		},
		saveImage() {
			let that = this;
			let platform = uni.getStorageSync('platform');
			if (platform === 'wxOfficialAccount') {
				that.$tools.toast('长按图片保存');
			} else {
				uni.saveImageToPhotosAlbum({
					filePath: that.poster.finalPath,
					success: res => {
						that.$tools.toast('保存成功');
					},
					fail: err => {
						that.$tools.toast('保存失败');
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.hideCanvasView {
	position: relative;
}

.slot-content {
	height: 700rpx;
	padding: 20rpx 30rpx;
	overflow-y: auto;
	
	.m-p {
		color: #666;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}
	
	.m-p-t {
		color: #010101;
		padding-top: 20rpx;
		font-size: 30rpx;
	}
}
.hideCanvas {
	position: fixed;
	top: -99999upx;
	left: -99999upx;
	z-index: -99999;
}

page {
	height: 100vh;
	width: 100%;
}
.page {
	height: 100vh;
	width: 100%;
	background: url($IMG_URL+'/poster/invite_bg.jpg') repeat-y;
	background-size: 100%;
}
.content {
	height: 100%;
	width: 100%;
	.poster-box {
		padding-top: 50rpx;
		height: 100%;
		width: 100%;

		.posterImage {
			width: 660rpx;
		}
	}
}

.share-box {
	width: 750rpx;
	border-radius: 30rpx;
	margin-top: 60rpx;
	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
			
			.guize-icon {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
				color: #ee7134;
				text-align: center;
				line-height: 78rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}
</style>
